<template>
    <div class="personal-wrapper">
      <div class="p-top">
        <img src="../../../static/images/login/registered.png" class="portrait">
        <h4 class="name">大马金刀</h4>
        <p class="ID-num">ID：9565212</p>
      </div>
      <div class="p-center">
        <div class="group1" @click="childInfo">
          <img src="../../../static/images/home/personal1.png" class="left-img">
          <span>儿童信息</span>
          <img src="../../../static/images/record/arrow-right.png" class="arrow-right">
        </div>
        <div class="group2">
          <div @click="wait">
            <img src="../../../static/images/home/personal2.png" class="left-img">
            <span>在线咨询</span>
            <img src="../../../static/images/record/arrow-right.png" class="arrow-right">
          </div>
          <div @click="wait">
            <img src="../../../static/images/home/personal3.png" class="left-img">
            <span>常用接种点</span>
            <img src="../../../static/images/record/arrow-right.png" class="arrow-right">
          </div>
          <div @click="wait">
            <img src="../../../static/images/home/personal4.png" class="left-img">
            <span>常见问题</span>
            <img src="../../../static/images/record/arrow-right.png" class="arrow-right">
          </div>
        </div>
      </div>

      <div class="exit-con">
        <x-button class="exit" @click.native="exit">退出</x-button>
      </div>

      <div style="height: 100px;"></div>
      <div class="home-footer">
        <div class="home-bar " @click="home">
          <img src="../../../static/images/home/footer-home.png">
          <p>首页</p>
        </div>
        <div class="appoint-bar" @click="goHome">
          <img src="../../../static/images/home/footer-appoint.png">
          <p>接种预约</p>
        </div>
        <div class="mine-bar active">
          <img src="../../../static/images/home/footer-mine-select.png">
          <p>我的</p>
        </div>
      </div>

    </div>
</template>

<script>
  import { XButton  } from 'vux'

    export default {
        name: "personal",
      metaInfo () {
        return {
          title: '个人中心'
        }
      },
      components: {
        XButton
      },
      methods:{
        exit(){
          let that=this;
          that.$api.post('/userHandle/logout').then(function (res) {
              if(res.data.result==0){
                that.$router.push({path: '/'});
                sessionStorage .clear();
              }else{
                this.$vux.toast.text(res.data.msg, 'middle')
              }
          })
        },
        childInfo(){
          this.$router.push({path: '/childInfo'})
        },
        home(){
          this.$router.push({path: '/index'})
        },
        goHome(){
          this.$router.push({path: '/appointment'})
        },
        wait(){
          this.$vux.toast.text(' 正在开发中，敬请期待', 'middle')
        },
      }
    }
</script>

<style lang="scss">
  .personal-wrapper{
    .p-top{
      background: url('../../../static/images/home/person-bg.png') no-repeat;
      background-size: 100% 100%;
      height: 112px;
      text-align: center;
      .portrait{
        width:74px;
        height:74px;
        border-radius:50%;
        border: 1px solid #fff;
        margin-top:40px;
      }
      .name{
        font-size:22px;
        font-family:PingFang-SC-Bold;
        font-weight:bold;
        color:rgba(38,38,38,1);
        margin:10px 0;
      }
      .ID-num{
        font-size:12px;
        font-family:PingFang-SC-Regular;
        color:rgba(122,122,122,1);
      }
    }
    .p-center{
      margin:80px 15px 0;
      .group1{
        background:rgba(255,255,255,1);
        box-shadow:0px 0px 24px 2px rgba(50,51,51,0.06);
        border-radius:10px;
        padding:20px 15px;
        .left-img{
          width:18px;
          height: 18px;
          vertical-align: middle;
        }
        span{
          font-size:15px;
          font-family:PingFang-SC-Regular;
          font-weight:400;
          color:rgba(38,38,38,1);
        }
      }
      .group2{
        background:rgba(255,255,255,1);
        box-shadow:0px 0px 24px 2px rgba(50,51,51,0.06);
        border-radius:10px;
        padding:0 15px;
        margin-top: 10px;
        div{
          padding:15px 0;
          &:first-child{
            border-bottom: 1px solid #EEEEEE;
          }
          &:nth-child(2){
            border-bottom: 1px solid #EEEEEE;
          }
        }
        .left-img{
          width: 18px;
          height: 18px;
          vertical-align: middle;
        }
      }
      .arrow-right{
        width:18px;
        height: 15px;
        vertical-align: middle;
        float: right;
      }
    }
    .home-footer{
      position: fixed;
      bottom: 0;
      width:100%;
      box-shadow:0px -3px 10px 0px rgba(50,51,51,0.08);
      display: flex;
      text-align: center;
      padding:10px 0;
      background:rgba(255,255,255,1);
      p{
        margin-top:4px;
        font-size:10px;
        color:rgba(122,122,122,1);
      }
      .active{
        p{
          color:rgba(218,74,74,1);
        }
      }
      .home-bar{
        flex:1;
        img{
          width:23px;
          height: 20px;
        }
      }
      .appoint-bar{
        flex:1;
        img{
          width:23px;
          height: 20px;
        }
      }
      .mine-bar{
        flex:1;
        img{
          width:20px;
          height: 20px;
        }
      }
    }
    .exit-con{
      padding: 0 15px;
      margin-top:50px;
      .exit{
        height: 48px;
        background: #f59797;
        -webkit-box-shadow: -1px 0px 47px 4px rgba(50, 51, 51, 0.06);
        box-shadow: -1px 0px 47px 4px rgba(50, 51, 51, 0.06);
        margin: 35px auto 0;
        color: white;
      }
    }
  }
</style>
